import React from 'react'
import ReactSwipe from 'react-swipe'

import './style.scss'

class Categoty extends React.Component{
    constructor(props){
        super(props)
        this.state ={
            index: 0
        }
    }
    render() {
        var opt = {
            auto: 2000,
            callback: (index) => {
                this.setState({
                    index: index
                })
            }
        }
        return (
            <div className="categroy">
                <ReactSwipe className="carousel" swipeOptions={opt}>
                    <div style={{background: 'pink'}}>PANE 1</div>
                    <div style={{background: 'skyblue'}}>PANE 2</div>
                    <div style={{background: 'yellowGreen'}}>PANE 3</div>
                </ReactSwipe>
                <div className="dianSwep">
                    <ul className="dian clearfix">
                        <li className={this.state.index === 0? 'current' : ''}></li>
                        <li className={this.state.index === 1? 'current' : ''}></li>
                        <li className={this.state.index === 2? 'current' : ''}></li>
                    </ul>
                </div>
            </div>
        )
    }
    componentDidMount(){
        // console.log(ReactSwipe)
    }
}

export default Categoty